<template lang="pug">
  .tu-confirm-white-mask
    form.tu-confirm(@submit.prevent="submit")
      h5.tu-confirm-content {{content}}
      .tu-btn-group
        input.tu-btn.tu-btn-cancel(
          type="button"
          value="cancel"
          @click="hide"
          )
        .tu-btn-gap
        input.tu-btn.tu-btn-submit(
          type="submit"
          value="submit"
          )
</template>

<script>
export default {
  data () {
    return {
      val: ''
    }
  },
  props: {
    content: String,
  },
  computed: {
  },
  methods: {
    reset () { this.val = '' },
    hide () {
      this.$emit('closeConfirm')
      this.reset()
    },
    submit () {
      this.$emit('submit')
      this.reset()
    }
  }
}
</script>

<style lang="stylus">
@import '~assets/stylus/variables.styl'
.tu-confirm-white-mask
  position: fixed
  left 0
  top 0
  z-index: 10000
  width 100vw
  height 100vh
  background rgba(0, 0, 0, .5)
.tu-confirm
  width: 32rem
  margin: 10rem auto
  padding 1rem 2rem
  border-radius: 5px
  background: $color-bg
  input[type="text"]
    padding 1rem
    width 100%
.tu-confirm-content
  padding 2rem 0 1rem 0
.tu-btn-group
  display flex
  margin-top 1rem
  align-content space-between
.tu-btn
  flex 1
  margin: 1rem 0;
  padding 1rem
  color $color-white
.tu-btn-gap
  width: 2rem
.tu-btn-cancel
  background: $color-warning
.tu-btn-submit
  background: $color-primary
</style>
